<template>
  <div class="menu-item" >
    <a class="menu-link"  target="_self"  style="font-size: 12px">
      <div class="logo">
        <i class="icon icon-head-notice"/>
      </div>
      <div class="text">消息</div>
    </a>
  </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
.menu-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      margin-bottom: 2px;
      border-radius: var(--devui-border-radius-card, 4px);
      transition: all var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
    }

    .logo:hover {
      background: var(--devui-base-bg, #ffffff);
      box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
      color: var(--devui-text, #252b3a) !important;
    }


    .text {
      font-size: var(--devui-font-size-sm, 12px);
      line-height: 16px;
      width: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }

    .text:hover {
      color: var(--devui-text, #252b3a) !important;
    }
  }
}
</style>
